<script lang="ts" setup>
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import { flushGameRank } from '@/api/game';
  import { Message } from '@arco-design/web-vue';

  const emit = defineEmits(['close']);

  const data = ref<{
    year: string;
    calType: number;
  }>({
    year: dayjs().format('YYYY'),
    calType: 1,
  });

  const saving = ref(false);
  const handleSubmit = async () => {
    saving.value = true;
    try {
      await flushGameRank(data.value.year, data.value.calType);
      Message.success('运行成功');
      emit('close');
    } finally {
      saving.value = false;
    }
  };
</script>

<template>
  <a-modal
    title="更新榜单"
    visible
    :width="500"
    :ok-loading="saving"
    @cancel="emit('close')"
    @before-ok="handleSubmit"
  >
    <a-form :model="data" layout="vertical">
      <a-form-item label="年份" field="year">
        <a-input v-model="data.year" />
      </a-form-item>
      <a-form-item label="类型" field="calType">
        <a-radio-group
          v-model="data.calType"
          :options="[
            { label: '差点总杆', value: 1 },
            { label: '差点净杆', value: 2 },
          ]"
        ></a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
